<template>
  <div>
    <!-- 红包弹窗 -->
    <nut-overlay
      v-model:visible="redEnvelopeState.isShow"
      :close-on-click-overlay="false"
    >
      <div class="red_bag">
        <div class="red_bag_main">
          <img
            src="/imgs/activity/redBag.webp"
            alt=""
            class="red_bag_img"
            v-if="!redEnvelopeState.isOpen"
          />
          <SpinePlayer v-else></SpinePlayer>
          <div class="user" :style="{ top: '40px' }" v-if="!redEnvelopeState.isOpen">
            <img :src="avatarUrl" alt="" />
            <span class="user_name">{{ info.full_name }}</span>
            <span class="user_info">你有一个红包待开启</span>
            <span class="user_open" @click="openBag">开启</span>
            <span class="user_notice" @click="closeModal">今日不再提醒</span>
            <img
              src="/imgs/activity/close.webp"
              alt=""
              @click="closeModal"
              class="close_icon"
            />
          </div>
          <div
            :class="['user', 'is_open', { is_getFunds: redEnvelopeState.isGetFunds }]"
            v-if="
              redEnvelopeState.isOpenInfo && redEnvelopeState.envelopeInfo?.is_open != 4
            "
            :style="{ top: '312px' }"
          >
            <span class="user_happy" v-if="redEnvelopeState.isGetFunds">恭喜发财</span>

            <img :src="avatarUrl" alt="" v-if="!redEnvelopeState.isGetFunds" />
            <span class="user_name" v-if="!redEnvelopeState.isGetFunds">{{
              info.full_name
            }}</span>
            <span class="user_info"
              >{{ redEnvelopeState.isGetFunds ? "红包领取成功" : "红包开启成功" }}
            </span>
            <span class="user_num">{{
              Intl.NumberFormat().format(redEnvelopeState.redBagInfo?.money)
            }}</span>
            <span class="user_get" v-if="redEnvelopeState.isGetFunds">已到账</span>
            <span class="user_open" @click="goDetail">{{ setName }}</span>

            <span class="user_step" v-if="!redEnvelopeState.isGetFunds"
              >距离领取红包仅差一步</span
            >
            <span class="user_task" v-if="!redEnvelopeState.isGetFunds"
              >完成任务即可领取红包</span
            >
            <span
              class="user_task"
              v-if="redEnvelopeState.isGetFunds && !redEnvelopeState.has_next_open"
              >恭喜您！全部红包已领取完毕， 请关注其他活动</span
            >
            <span
              class="user_task"
              v-if="redEnvelopeState.isGetFunds && redEnvelopeState.has_next_open"
              >您收到新的红包，点击即可开启</span
            >

            <img
              src="/imgs/activity/close.webp"
              alt=""
              @click="closeModal"
              class="close_icon"
            />
          </div>
          <!-- 全部红包已领取 -->
          <div
            :class="[
              'user',
              'is_open',
              { is_get_all: redEnvelopeState.envelopeInfo?.is_open == 4 },
            ]"
            v-if="
              redEnvelopeState.envelopeInfo?.is_open == 4 && redEnvelopeState.isOpenInfo
            "
            :style="{ top: '312px' }"
          >
            <span class="user_num">恭喜</span>
            <span class="user_info">全部红包已领取完毕，请关注新手活动 </span>
            <!-- <span class="user_num">{{
              redEnvelopeState.redBagInfo?.money
                ? Intl.NumberFormat().format(redEnvelopeState.redBagInfo?.money)
                : ""
            }}</span> -->

            <span class="user_open" @click="allcloseModal">返回</span>
            <img
              src="/imgs/activity/close.webp"
              alt=""
              @click="allcloseModal"
              class="close_icon"
            />
          </div>
        </div>
      </div>
    </nut-overlay>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { info } from "@/utils/commonVar";
import SpinePlayer from "./SpinePlayer/SpinePlayer.vue";
import { useRouter } from "vue-router";
import { useredEnvelopeHooks, redEnvelopeState } from "../hooks.ts";
const router = useRouter();

defineProps({
  avatarUrl: {
    type: String,
    default: "",
  },
});

const {
  openBag,
  closeModal,
  setName,
  receiveRed,
  awardMyRecordClick,
  awardRecordClick,
} = useredEnvelopeHooks();
const openMpdal = () => {
  redEnvelopeState.isShow = true;
};

//
const allcloseModal = () => {
  redEnvelopeState.isShow = false;
  redEnvelopeState.isOpen = false;
  redEnvelopeState.isOpenInfo = false;
  setTimeout(() => {
    router.push({
      path: "/activity",
    });
  }, 500);
};

const goDetail = () => {
  closeModal();
  if (!redEnvelopeState.isGetFunds) {
    router.push({
      path: "/activity/redEnvelope",
    });
  }
  if (redEnvelopeState.isGetFunds && !redEnvelopeState.has_next_open) {
    router.push({
      path: "/activity",
    });
  }
  if (redEnvelopeState.isGetFunds && redEnvelopeState.has_next_open) {
    router.push({
      path: "/activity/redEnvelope",
    });
    openBag();
    setTimeout(() => {
      receiveRed();
      awardMyRecordClick();
      awardRecordClick();
    }, 200);
  }
};

defineExpose({
  openMpdal,
});
</script>

<style lang="scss" scoped>
.red_bag {
  position: relative;
  width: 100%;
  height: 100%;
  .red_bag_main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .red_bag_img {
    height: 312px;
  }
  .close_icon {
    margin-top: 26px;
    height: 32px !important;
    width: 32px !important;
  }
  .user {
    position: absolute;

    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .user_name {
      color: #ffffff;
      font-size: 14px;
      font-weight: 900;
      margin-top: 10px;
    }
    .user_info {
      margin-top: 10px;
      color: #ffffff;
      font-size: 12px;
      font-weight: 500;
    }
    .user_open {
      font-size: 22px;
      font-weight: 600;
      margin-top: 42px;
      color: #d87236;
      cursor: pointer;
    }
    .user_notice {
      margin-top: 60px;
      color: #ffcd82;
      font-size: 12px;
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .is_open {
    .user_open {
      background-image: url("/imgs/activity/coin.webp");
      background-size: 100%;
      width: 85px;
      height: 85px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -10px;
    }
    .user_name,
    .user_info {
      color: #a79054;
    }
    .user_num {
      color: #ff201b;
      font-size: 40px;
      font-weight: 900;
    }
    .user_step {
      margin-top: 70px;
      color: #ffffff;
      font-size: 12px;
    }
    .user_task {
      margin-top: 10px;
      color: #fec808;
      font-size: 16px;
    }
  }
  .is_getFunds {
    .user_info {
      margin-top: 40px;
    }
    .user_open {
      margin-top: 25px;
    }
    .user_get {
      color: #a79054;
    }
    .user_task {
      text-align: center;
      width: 100%;
      margin-top: 90px;
    }
  }
}
.is_get_all {
  .user_num {
    margin-top: 38px;
  }
  .user_info {
    width: 60%;
    text-align: center;
    margin-bottom: 38px;
  }
  .close_icon {
    margin-top: 70px;
  }
}
.user_happy {
  margin-top: -80px;
  margin-bottom: 30px;
  font-size: 32px;
  font-weight: 900;
  background: -webkit-linear-gradient(#eee, #fec600);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
